<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>360商城</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>

<body>
  <!-- 顶部 -->
  <header></header>
  <!-- 轮播 -->
  <div id="banner">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><a href="#"><img src="./img/img/index_img/banner1.webp" alt=""></a></div>
        <div class="swiper-slide"><a href=""><img src="./img/img/index_img/banner2.webp" alt=""></a></div>
        <div class="swiper-slide"><a href=""><img src="./img/img/index_img/banner3.webp" alt=""></a></div>
        <div class="swiper-slide"><a href=""><img src="./img/img/index_img/banner4.webp" alt=""></a></div>
        <div class="swiper-slide"><a href=""><img src="./img/img/index_img/banner5.webp" alt=""></a></div>
        <div class="swiper-slide"><a href=""><img src="./img/img/index_img/banner6.webp" alt=""></a></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
  <!-- 轮播结束 -->
  <div class="category-nav container">
    <div class="category-position">
      <div class="category">
        <div class="category-item-all">全部搜索结果</div>
        <ul class="category-list">
          <li class="category-item"><a href="">家庭安防</a></li>
          <li class="category-item"><a href="">安全路由</a></li>
          <li class="category-item"><a href="">智能手表</a></li>
          <li class="category-item"><a href="">汽车用品</a></li>
          <li class="category-item"><a href="">扫地机器人</a></li>
        </ul>
      </div>
      <ul class="category-right">
        <li>
          <a href="">
            <span><img src="./img/img/index_img/anfang1.webp" alt=""></span>
            <span>摄像机</span>
          </a>
          <a href="">
            <span><img src="./img/img/index_img/anfang2.webp" alt=""></span>
            <span>门铃</span>
          </a>
          <a href="">
            <span><img src="./img/img/index_img/anfang3.webp" alt=""></span>
            <span>储存卡</span>
          </a>
          <a href="">
            <span><img src="./img/img/index_img/anfang4.webp" alt=""></span>
            <span>云录卡</span>
          </a>
          <a href="">
            <span><img src="./img/img/index_img/anfang5.webp" alt=""></span>
            <span>配件</span>
          </a>

        </li>
        <li>
          <a href="">
            <span><img src="./img/img/index_img/luyou1.webp" alt=""></span>
            <span>路由器</span>
          </a>
        </li>
        <li>
          <a href="">
            <span><img src="./img/img/index_img/shoubiao1.webp" alt=""></span>
            <span>智能手表</span>
          </a>
        </li>
        <li>
          <a href="">
            <span><img src="./img/img/index_img/qiche1.webp" alt=""></span>
            <span>记录仪</span>
          </a>
          <a href="">
            <span><img src="./img/img/index_img/qiche2.webp" alt=""></span>
            <span>安全座椅</span>
          </a>
          <a href="">
            <span><img src="./img/img/index_img/qiche3.webp" alt=""></span>
            <span>胎压检测</span>
          </a>
          <a href="">
            <span><img src="./img/img/index_img/anfang2.webp" alt=""></span>
            <span>存储卡</span>
          </a>
          <a href="">
            <span><img src="./img/img/index_img/qiche4.webp" alt=""></span>
            <span>配件</span>
          </a>

        </li>
        <li>
          <a href="">
            <span><img src="./img/img/index_img/saodi1.webp" alt=""></span>
            <span>主机</span>
          </a>
          <a href="">
            <span><img src="./img/img/index_img/saodi2.webp" alt=""></span>
            <span>配件</span>
          </a>
        </li>
      </ul>

    </div>

  </div>
  <!-- meanu结束 -->
  <!-- 热门活动 -->
  <div class="main">
    <div class="hot-event container">
      <div class="item-sp"><span class="item-span">热门活动</span></div>
      <div class="hot-event-top">
        <a href="" class="hot-event-img"><img src="./img/img/index_img/hot1.webp" alt=""></a>
        <a href="" class="hot-event-img"><img src="./img/img/index_img/hot2.webp" alt=""></a>
        <a href="" class="hot-event-img"><img src="./img/img/index_img/hot3.webp" alt=""></a>
        <a href="" class="hot-event-img-last"><img src="./img/img/index_img/hot4.webp" alt=""></a>
      </div>
      <div>
        <a href=""><img src="./img/img/index_img/item1.webp" alt=""></a>
      </div>
    </div>
    <!-- 家庭安防 -->
    <div class="container">
      <span class="item-span">家庭安防</span>
      <a href="" class="more-lnk">全部>></a>
      <ul class="goods-render">
        <!-- <li><a href=""><img src="img/img/index_img/saodi2.webp" alt="">
        <p class="title">12365</p>
      <p class="price">1314546</p></a></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li> -->
      </ul>
      <div><a href=""><img src="./img/img/index_img/item3.webp" alt=""></a></div>
  
    </div>
    <!-- 行车安全 -->
    <div class="container">
      <span class="item-span">行车安全</span>
      <ul class="goods-render">
        <!-- 商品数据渲染 -->
      </ul>


      <div>
        <a href=""><img src="./img/img/index_img/item3.webp" alt=""></a>
      </div>
    </div>
      <!-- 扫地机器人 -->
  
      <div class="container">
        <span class="item-span">扫地机器人</span>
        <ul class="goods-render">
          <!-- 商品数据渲染 -->
        </ul>
  
  
        <div>
          <a href=""><img src="./img/img/index_img/item5.webp" alt=""></a>
        </div>
      </div>
  
  
      <!-- 智能守护 -->
      <div class="container">
        <span class="item-span">智能守护</span>
        <ul class="goods-render">
          <!-- 商品数据渲染 -->
        </ul>
      </div>
  
      <div class="footer-font">
        <span>————————我已经陪你到底了————————</span>
      </div>
  
    </div>
  </div>

  <!-- 侧边导航楼层 -->
  <ul class="right-nav">
    <li>热门活动</li>
    <li>家庭安防</li>
    <li>行车安全</li>
    <li>扫地机器人</li>
    <li>智能守护</li>
    <li>关于商城</li>
  </ul>


<!-- 尾部 -->
<footer></footer>







  <script src="./libs/swiper-bundle.min.js"></script>

  <script>
    var mySwiper = new Swiper('.swiper', {
      effect: 'fade',
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      }
    })
  </script>
  <script src="./libs/jquery.min.js"></script>
  <script src="./libs/jquery.cookie.js"></script>
  <script src="./libs/require.js" data-main="./js/main"></script>
  <script>
    $('header').load('./html/header.html')
    $('footer').load('./html/footer.html')
  </script>

</body>

</html>